<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的分享</title>

    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>

    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css"/>
    <style>
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    .share_button_image{
      background:#F95656;
      padding:10px;
      color:#fff;
      text-align:center;
      position:fixed;
      bottom:20px;
      z-index:120;
      width:40%;
      border-radius: 20px;
      right:2%;
      font-size: 12px;
    }
    .share_button_link{
      background:#ffffff;
      padding:10px;
      color:#F95656;
      text-align:center;
      position:fixed;
      bottom:20px;
      z-index:120;
      width:40%;
      border-radius: 20px;
      left:2%;
      font-size: 12px;
    }
    .share_info{
      width: 50%;
      position: fixed;
      top:30%;
      text-align: center;
      left:25%;
      font-size: 13px;
      color: #fff
    }
    </style>
</head>
<body style="height:100%">
  <!-- <div id="blank" class="header">
      <div v-back.tapmode class="back"></div>
      <span class="title">我的分享</span>
  </div> -->
  <div style="position:fixed;top:20px;left:20px;z-index:10" onclick="back()"><img src="../../image/fanhui.png" width="18px"></div>

  <div id="app"  v-cloak style="height:100%">
    <van-swipe  >
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image"/>
      </van-swipe-item>
    </van-swipe>
    <div  style="width:46%;  background-color: #fff; border-radius:7px;position:fixed;top:42%;left:27% ">
  <img :src="qrcode" style="width: 100%;">
</div>
<div class="share_info">
  <div>{{user.nickname}}邀请您一起发家致富</div>
  <div style="background:#857A7D;padding:5px 0px;border-radius:10px;margin-top:5px">邀请码：{{hide_phone(user.inviteCode)}}</div>
</div>
  </div>

  <div onclick="savelink()" class="share_button_link">复制链接分享</div>
  <div onclick="saveImg()" class="share_button_image">分享图片给微信好友</div>

</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

<script>

var user;
var vm;
var qrcode;
var wx;
var makeSharePic;
var htmltoImage;
apiready = function () {
    setBSImg();
    scanner = api.require('FNScanner');
    wx = api.require('wx');
    htmltoImage = api.require("htmltoImage");

    new Vue({
        el: '#blank'
    });
    if(!hasPrefs('token')){
			user = {};
			encodeImg('http://wap.tecdd.cn:9094?inviteCode='+'15221696790');
		  api.parseTapmode();
		}else{
			var data = {
				member_id: getPrefs('member_id'),
				token:getPrefs('token'),
				wxOpenId:getPrefs('openid')
			};
			var callback = function (ret) {
					user = ret.content;
				  encodeImg('http://wap.tecdd.cn:9094/?inviteCode='+user.inviteCode);
					// api.parseTapmode();
			};

			pinet.post(APIURLP+'/play/user/queryUserInfo', data, callback);
		}
    addListeners();
};

function _fixType(type) {
	type = type.toLowerCase().replace(/jpg/i, 'jpeg');
	var  r = type.match(/png|jpeg|bmp|gif/)[0];
	return 'image/' + r;
};

function initApp(qrcode) {
    vm = new Vue({
        el: '#app',
        data: {
            imgPath:'../../image/',
            qrcode: qrcode,
            user:user,
            appInstalled: {
                wx: true,
                qq: true,
            },
            BSImg: {
                big: Vue.BSImg == 'big',
                small: Vue.BSImg == 'small'
            },
            images: [
            '../../image/share-1.png',
            '../../image/share-2.png',
            '../../image/share-3.png'
          ]
        },
        computed:{
        },
        methods:{
            hide_phone:function(value){
                return value.substring(0, 3)+"****"+value.substr(value.length-4);
            },
          saveImg:function(){
            html2canvas($("#app")).then(function (canvas) {
                            var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                            var trans = api.require('trans');
                            imgData = imgUri.replace('data:image/octet-stream;base64,','');
                            console.log(imgUri)
                            console.log(imgData)
                            trans.saveImage({
                                base64Str: imgData,
                                imgPath:"fs://img/",
                                imgName:"share.png"
                            }, function(ret, err) {
                                if (ret.status) {
                                  var imageFilter = api.require('imageFilter');
                                   var imageCachePath = api.cacheDir;
                                   var imgName = new Date().getTime();
                                  imageFilter.compress({
                                      img: 'fs://img/share.png',
                                      quality : 0.2,
                                      scale : 0.3,
                                      save : {
                                     album : true,
                                     imgPath : 'fs://img/',
                                     imgName : 'filter.png'
                             }
                                  },function( res, ert ){

                                      if( res.status ){
                                          shareImage('fs://img/filter.png','fs://img/share.png')
                                      }else{
                                          alert('分享失败')
                                      }
                                  });

                                } else {
                                    alert(JSON.stringify(err));
                                }
                            });
                        });

          },
          share_wx: function (scene) {
             var that = this;
              if(!that.appInstalled.wx){
                api.alert({
                    title: '提示',
                    msg: '未能检测到本地微信',
                    buttons: ['确定']
                }, function (ret, err) {});
              }else{
                var params = {
                  title:'您的好友邀请您加入趣红人',
                  content:'您的好友邀请您加入趣红人',
                  url:'http://wap.tecdd.cn:9094/?inviteCode='+user.inviteCode,
                  image:'widget://image/logo.png'
                }
                share_wx(scene, params);
              }
          }

        },
        created: function () {
            var that = this;
            wx.isInstalled(function (ret) {
                that.appInstalled.wx = ret.installed;
            });
        }
    });
}

function encodeImg(qrcode) {
    scanner.encodeImg({
        content: qrcode,
        saveImg: {
            path: 'fs://qrcode_share.png',
            w:400,
            h:400
        }
    }, function (ret) {
        qrcode = {};
        if(ret.status){
           qrcode = ret.imgPath;
        }
        initApp(qrcode);
        listenUpdUser(vm.user);
        api.parseTapmode();
    })
}

function addListeners() {

}
function back(){
  closeWin();
}
function saveImg(){
  vm.saveImg();
}

function savelink(){
  vm.share_wx('session');
}

</script>
</html>
